<template>
  <Panel title="防疫点数量" class="ponint-wrapper" direction="row" :mainStyle="{ 'justify-content': 'space-around' }" v-bind="$attrs">
    <!-- 高速部分 -->
    <div class="point-box">
      <div class="content">
        <div class="img-box">
          <div class="img"></div>
        </div>
        <div class="center">
          <div class="road">高速公路</div>
          <div class="count number">{{ state.gsEpidemicPreventionTotal }}</div>
        </div>
      </div>
      <SequentialSame
        :data="{ ring: state.gsEpidemicPreventionHb, same: state.gsEpidemicPreventionTb }"
        class="point-same"
      >
      </SequentialSame>
    </div>

    <!-- 公路部分 -->
    <div class="point-box">
      <div class="content">
        <div class="img-box">
          <div class="img"></div>
        </div>
        <div class="center">
          <div class="road">普通公路</div>
          <div class="count number">{{ state.glEpidemicPreventionTotal }}</div>
        </div>
      </div>
      <SequentialSame
        :data="{ ring: state.glEpidemicPreventionHb, same: state.glEpidemicPreventionTb }"
        class="point-same"
      >
      </SequentialSame>
    </div>
  </Panel>
</template>
<script>
export default {
  name: 'EpidemicPoint'
}
/**
 * @desc  防疫点数量 (2级)
 * @auther 邓清波
 * @date  2022/10/24
 * **/
</script>
<script setup>
import Panel from '../../components/panel'
import SequentialSame from '../../components/sequential-same/index.vue'
import { ref } from 'vue'
import epidemicApi from '../../api/epidemic'
import useWatchStore from '@/hooks/useWatchStore'

const state = ref({})

useWatchStore(getData)

/**
 * 获取防疫点数量
 * */
function getData(argParams) {
  const params = {
    roadType: argParams.roadType,
    province: '32',
    city: argParams.isProvince ? null : argParams.areaCode
  }
  epidemicApi.getEpidemicPointStatistic(params).then(res => {
    console.log('防疫点数量', res)
    state.value = res.data || {}
  })
}
</script>

<style lang="less" scope>
/deep/ .mz-panel-content-main {
  flex-direction: row !important;
}

.ponint-wrappe {
  width: 100%;
}

.point-box {
  display: flex;
  flex-direction: column;

  .point-same {
    height: 50px;
    margin-top: 5px;
    display: flex;
    .sequential {
      margin-right: 10px;
    }
  }

  .content {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .center {
      flex: 1;
      margin-left: 16.5px;
    }

    .count {
      font-size: 24px;
      color: #0088ff;
    }
  }

  .img-box {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
  }

  .img {
    width: 55px;
    height: 64px;
    background: url('../../assets/images/epidemic/epidemicPoint-rect.png') no-repeat;
    background-size: cover;
  }
}
</style>
